<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            width: 100%;
            margin: 0 auto;
            background: linear-gradient(-45deg,purple,blue);
        }
        .container{
            margin: 50px auto;
            width: 470px;
            height: 630px;
            overflow: hidden;
            position: relative;
        }
        table{
            width: 464px;
            height: 612px;
            position: absolute;
            right: 0;
            bottom: 0;
            border-collapse: collapse;
        }
        td{
            width: 150px;
            height: 150px;
            border: 6px solid pink;
        }
        .main{
            color: white;
            margin: 30px auto;
            text-align: center;
            vertical-align: middle;
            font-size: 50px;

        }
        #score{
            display: inline-block;
            padding-right: 200px;
        }
        #time{
            display: inline-block;
        }
        .caption{
            width: 300px;
            font-size: 60px;
            font-weight: bold;
            text-align: center;
            position: relative;
            margin: 0 auto;
            color: transparent;
            -webkit-text-fill-color: transparent;/*文字的填充色*/
            -webkit-text-stroke: 1.2px white;
        }
        .font{
            color: transparent;
            display: inline-block;
            font-size: 60px;
            font-weight: bold;
            position: absolute;
        }
        .one{
            left: 14.5%;
            top: 81%;
        }
        .two{
            left: 45%;
            top: 81%;
        }
        .three{
            left: 79%;
            top: 81%;
        }
    </style>
</head>
<body>
    <div class="main"><div id="score">0</div><div id="time">00:00:00</div></div>
    <div class="caption">别踩白块!</div>
    <div class="container">
        <table id="tab">
            <tr><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td></tr>
        </table>
        <span class="font one">J</span>
        <span class="font two">K</span>
        <span class="font three">L</span>
    </div>
</body>
<script>
    var Game={
        // 属性
        int : null,
        mis : 0,
        sec : 0,
        min : 0,
        score : 0,
        bool : true,
        btn : 0,
        tab : document.getElementsByTagName('table')[0],
        font : document.getElementsByTagName('span'),
        sco : document.getElementById('score'),
        time : document.getElementById('time'),
        hang : document.getElementsByTagName('tr'),
        // 方法
        times : function(){
            Game.mis+=1;
            if(Game.mis>99){
                Game.mis=0;
                Game.sec+=1;
            }
            if(Game.sec>59){
                Game.sec=0;
                Game.min+=1;
            }
            if(Game.min>23){
                Game.min=0;
            }
            Game.begin();
        },
        color : function(){
            if(Game.hang[3].children[0].style.background=='black'){
            Game.font[0].style.color='white';
            }else{
                Game.font[0].style.color='transparent';
            }
            if(Game.hang[3].children[1].style.background=='black'){
                Game.font[1].style.color='white';
            }else{
                Game.font[1].style.color='transparent';
            }
            if(Game.hang[3].children[2].style.background=='black'){
                Game.font[2].style.color='white';
            }else{
                Game.font[2].style.color='transparent';
            }
        },
        adds : function(){
            Game.tab.insertRow(0);
            for(var i=0;i<3;i++){
                Game.hang[0].insertCell();
            }
            Game.hang[0].children[Math.ceil(Math.random()*3)-1].style.background='black';
        },
        speedup : function(){
            if(Game.btn==0 || Game.btn%150!=0){
            Game.tab.style.bottom=-Game.btn-5+'px';
            Game.btn+=5;
            setTimeout(Game.speedup,1);
            }else{
                clearTimeout(Game.speedup);
                Game.btn+=5;
            }
        },
        speed : function(){
            Game.adds();
            Game.speedup();
        },
        scores : function(){
            Game.score+=1;
            Game.sco.innerHTML=Game.score;
        },
        over : function(){
            alert('游戏结束,得分：'+Game.score+';用时'+Game.time.innerHTML);
            clearInterval(Game.int);
            Game.mis = 0;
            Game.sec = 0;
            Game.min = 0;
            Game.score=0;
            Game.sco.innerHTML=Game.score;
            Game.bool=true;
        },
        begin : function(){
            Game.time.innerHTML = (Game.min < 10 ? "0" + Game.min :Game.min) + ":" +(Game.sec < 10 ? "0" + Game.sec :Game.sec) + ":" + (Game.mis < 10 ? "0" + Game.mis :Game.mis);
        },
        key : function(){
            onkeydown=function(event){
                if(Game.bool==true && (event.key=='j' || event.key=='k' || event.key=='l')){
                    Game.int=setInterval(Game.times,10);
                    Game.bool=false;
                }
                switch(event.key){
                    case 'j':
                        if(Game.hang[3].children[0].style.background=='black'){
                            Game.speed();
                            Game.scores();
                        }else{
                            Game.over();
                            Game.begin()
                        }
                        break;
                    case 'k':
                        if(Game.hang[3].children[1].style.background=='black'){
                            Game.speed();
                            Game.scores();
                        }else{
                            Game.over();
                            Game.begin()
                        }
                        break;
                    case 'l':
                        if(Game.hang[3].children[2].style.background=='black'){
                            Game.speed();
                            Game.scores();
                        }else{
                            Game.over();
                            begin()
                        }
                        break;
                }
                Game.color();
            }
        },
        
    }
    //获取列---------------------------------------------
    Game.hang[0].children[Math.ceil(Math.random()*3)-1].style.background='black';
    Game.hang[1].children[Math.ceil(Math.random()*3)-1].style.background='black';
    Game.hang[2].children[Math.ceil(Math.random()*3)-1].style.background='black';
    Game.hang[3].children[Math.ceil(Math.random()*3)-1].style.background='black';
    //--------------------------------------------------
    //键盘按下事件----------------------------------------
    Game.color();
    Game.key();
    //---------------------------------------------------
</script>
</html>